<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body {
            margin: 0;
        }
        .btns {
            position: fixed;
            top: 2rem;
            left: 2rem;
            display: flex;
            flex-wrap: wrap;
            max-width: 45%;

        }
        button {
            display: inline-block;
            margin: 0.2rem;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="btns">
        <button id="btn1" data-type="1">RenderPass</button>
        <button id="btn2" data-type="2">GlitchPass 故障闪屏</button>
        <button id="btn3" data-type="3">AfterimagePass 残影</button>
        <button id="btn4" data-type="4">FilmPass 电影雪花效果</button>
        <button id="btn5" data-type="5">UnrealBloomPass 发光效果</button>
        <button id="btn6" data-type="6">HalftonePass 三色圆点效果</button>
        <button id="btn7" data-type="7">OutlinePass 边缘描边</button>
        <button id="btn8" data-type="8">SMAAPass 抗锯齿</button>
        <button id="btn9" data-type="9">伽马校正</button>
    </div>
    
    <script type="importmap">
        {
            "imports": {
                "three": "https://esm.sh/three@0.174.0/build/three.module.js",
                "three/addons/": "https://esm.sh/three@0.174.0/examples/jsm/"
            }
        }
    </script>
    <script type="module" src="index.js"></script>
</body>
</html>
